<!--引入thymeleaf模板-->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<div class="layui-col-sm12" id="plan">
    <header>
        <nav class="todo-nav layui-row ">
            <ul class="edit ">
                <li>
                    <a href=" " class="iconfont icon-leftarrow layui-col-sm1 "></a>
                </li>
                <li><a href=" " class="layui-col-sm1 layui-col-sm-offset10 ">完成</a></li>
            </ul>
            <ul class="normal layui-row ">
                <li>
                    <a href=" " class="iconfont icon-leftarrow layui-col-sm1 "></a>
                </li>
                <li><a href=" " class="layui-col-sm1 layui-col-sm-offset9 ">主题</a></li>
                <li>
                    <a href=" " class="iconfont icon-category layui-col-sm1 "></a>
                </li>
            </ul>
        </nav>
        <div class="plan-title ">
            <h1>已计划日程</h1>
        </div>
    </header>
    <section class="todo-bd">
        <ul class="undone">
            <li><i class="icon-default-template"></i>
                <p contenteditable="true">点击此处可编辑</p>
                <i class="icon-collection important-color "></i>
            </li>
            <li><i class="icon-default-template"></i>
                <p contenteditable="true">字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制</p>
                <i class="icon-collection-fill important-color "></i>
            </li>
        </ul>
        <ul class="finish">
            <h4 class="finish-title">
                已完成
            </h4>
            <li><i class="icon-ashbin"></i>
                <p>不可编辑</p>
                <i class="icon-return "></i>
            </li>
            <li><i class="icon-ashbin"></i>
                <p contenteditable="true">字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制字数不限制</p>
                <i class="icon-return "></i>
            </li>
        </ul>


    </section>
    <div class="add"><i class="iconfont icon-add-select "></i><input type="text " placeholder="添加任务 "></div>
</div>
<script>
    $('.add input').on({
            //获得焦点时样式变化并且上面可完成
            focus: function() {
                $(this).parent('.add').css({
                    'width': '74%',
                    'margin': '10px 17px 10px 0',
                    'border-radius': '0'
                })
                $('.edit').css('display', 'block')
                $('.normal').css('display', 'none')
            },
            //失去焦点时样式变化并且上面为正常
            blur: function() {
                $(this).parent('.add').css({
                    'width': '72%',
                    'margin': '10px 2%',
                    'border-radius': '10px'
                })
                $('.edit').css('display', 'none')
                $('.normal').css('display', 'block')
            }
        })
        //点击添加为重要,完成等
    $('.todo-bd').delegate('.undone li i:last-child', 'click', function() {
        $(this).toggleClass('icon-collection')
        $(this).toggleClass('icon-collection-fill')
    })
    $('.todo-bd').delegate('.undone li i:first-child', 'click', function() {
        $(this).parent('li').detach()
        $(this).removeClass('icon-default-template')
        $(this).addClass('icon-ashbin')
        $(this).siblings('i').removeClass('icon-collection-fill icon-collection important-color')
        $(this).siblings('i').addClass('icon-return')
        $(this).parent('li').appendTo('.finish')
    })
    $('.todo-bd').delegate('.finish li i:last-child', 'click', function() {
        $(this).parent('li').detach()
        $(this).removeClass('icon-return')
        $(this).addClass(' icon-collection important-color')
        $(this).siblings('i').removeClass('icon-ashbin')
        $(this).siblings('i').addClass('icon-default-template')
        $(this).parent('li').appendTo('.undone')
    })
    $('.todo-bd').delegate('.finish li i:first-child', 'click', function() {
        $(this).parent('li').remove()
    })
</script>